<template>
  <div class="users">
    <div class="users_hander">
      <h1 class="title">用户列表</h1>
    </div>
    <div class="users_Content">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="id" label="ID" width="150"></el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="200"
        ></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column
          prop="createTime"
          :formatter="formatTime"
          label="注册时间"
        ></el-table-column>
      </el-table>

      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pagesize"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn, Pagination } from "element-ui";
import { users } from "@/api/index";
import Time from "@/utils/Time";
export default {
  name: "users",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
  },
  data() {
    return {
      tableData: [],
      pagesize: 20,
      currentpage: 1,
      total: 0,
    };
  },
  methods: {
    async getData() {
      const res = await users();
      console.log(res);
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
      console.log(this.tableData);
    },
    handleSizeChange(psize) {
      console.log(psize);
      this.pagesize = psize;
    },
    handleCurrentChange(cpage) {
      console.log(cpage);
      this.currentpage = cpage;
      users({ pageNum: this.currentpage }).then((res) => {
        this.tableData = res.data.data.list;
      });
    },
    formatTime(row, column, cellValue, index) {
      console.log(row.createTime);
      return Time(row.createTime);
    },
  },
  created() {
    // console.log("11")
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.users {
  width: 95%;
  margin: 0 auto;
}
.users_hander {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  display: inline-block;
  font-weight: normal;
}

.users_Content {
  margin-top: 1%;
}
</style>